<template>
	<gui-page :customHeader="true" >
		<template v-slot:gHeader>
			<view class="gui-margin">
				 
			</view>
		</template>
		<!-- 请开始您的开发 ~ -->
		<template v-slot:gBody>
			<view class="gui-padding">

				<view class="user_box gui-flex gui-space-between gui-align-items-center">

					<view class="left gui-flex gui-align-items-center">
						<gui-image src="../../static/user.png" :height="80" :width="80"
							borderRadius="200rpx"></gui-image>

						<view class="user_info gui-flex gui-column">
							<view class="">
								<text class="name gui-bold">{{userInfo.name}}</text>
								<!-- <text
									class="ml10 gui-bg-primary gui-color-white gui-padding-small gui-text-small ">已实名</text> -->
							</view>
							<text class="phone gui-text gui-color-grey1">{{userInfo.userName}}</text>
						</view>
					</view>

					<view class="right gui-flex gui-column gui-justify-content-center gui-align-items-center ">
						<view class="gui-icons gui-bold">
							&#xe613;

						</view>
						<text class="gui-text gui-title-text">设置</text>
					</view>
				</view>




				 

				 

			 

		<view class="gn_lsit ">
			 
		
			<navigator class="item gui-flex gui-space-between gui-align-items-center gui-border-b">
				<text  class="title">关于我们</text>
				<text class="gui-icons">&#xe601;</text>
			</navigator>
		
			
			<view class="item gui-flex gui-space-between gui-align-items-center gui-border-b" @tap="onLogout">
				<text  class="title">退出登陆</text>
				<text class="gui-icons">&#xe601;</text>
			</view>
		</view>



			</view>
		</template>
	</gui-page>
</template>
<script>
	import user from "@/api/user.js"
	export default {
		data() {
			return {
				userInfo:{}
			}
		},
		onShow() {
			this.getUserInfo();
		},
		methods: {
			
			onLogout(){
				uni.removeStorage({
					key: 'token',
					success: function (res) {
						console.log('退出登陆成功');
						uni.navigateTo({
							url:'/pages/login/login'
						})
					}
				});
			},
			getUserInfo(){
				user.getUserInfo().then(res=>{
					this.userInfo=res.userInfo;
				})
			}

		}
	}
</script>
<style>
	page {
		background-image: url('@/static/bg.png');
		background-repeat: no-repeat;
		background-size: cover;
	}
</style>
<style lang="scss" scoped>
	.gui-secondary-text {
		line-height: 52rpx;
	}
	.gn_lsit{
		margin-top: 20rpx;
		.item{
			padding: 20rpx 0;
			.title{ color: #222; padding-left: 3px;}
		}
	}
	.user_box {
		padding: 30rpx 0;
		.user_info {
			padding: 5rpx 10rpx;
			.ml10 {
				margin-left: 20rpx;
			}
			.phone {
				line-height: 45rpx;
				color: #444;
			}
		}
	}
	.bt {
		position: relative;
		&::after {
			position: absolute;
			left: 0px;
			bottom: 0px;
			content: "";
			width: 150rpx;
			height: 13px;
			z-index: 1;
			background: linear-gradient(90deg, rgba(10, 95, 255, 1.0) 0%, rgba(0, 148, 196, 1.0) 99.91%);
		}
		.title {
			position: relative;
			z-index: 9;
		}
	}
	.acction_box {
		.item {
			padding: 20rpx;
			position: relative;
			&:first-child {
				margin-right: 5px;
			}
			&:last-child {
				margin-left: 5px;
			}
			overflow: hidden;
			&::after {
				position: absolute;
				content: "";
				width: 200px;
				height: 200px;
				border-radius: 100px;
				right: -150px;
				top: 0px;
				z-index: 1;
				background: linear-gradient(129.8deg, rgba(226, 247, 227, .1) 0%, rgba(255, 255, 255, .2) 100%);
			}
			&::before {
				position: absolute;
				content: "";
				width: 200px;
				height: 200px;
				border-radius: 100px;
				right: -150px;
				top: 20px;
				z-index: 1;
				background: linear-gradient(129.8deg, rgba(226, 247, 227, .1) 0%, rgba(255, 255, 255, .11) 100%);
			}
			.title {
				font-size: 26rpx;
				color: rgba(250, 250, 250, .6);
				line-height: 40rpx;
			}
			.num {
				font-size: 52rpx;
				font-weight: bold;
				color: rgba(250, 250, 250, 1);
				line-height: 60rpx;
			}
		}
	}
</style>